<template>
  <van-notice-bar
    left-icon="volume-o"
    :scrollable="false"
    class="van-notice-bar"
    color="#fff"
    background="#96cdee"
  >
    <van-swipe
      vertical
      class="notice-swipe"
      :autoplay="3000"
      :touchable="false"
      :show-indicators="false"
    >
      <van-swipe-item v-for="item of newsItem" :key="item.id">{{
        item.text
      }}</van-swipe-item>
    </van-swipe>
  </van-notice-bar>
</template>
<script setup>
const newsItem = [
  { text: "明月直入，无心可猜。", id: 1 },
  { text: "仙人抚我顶，结发受长生。", id: 2 },
  { text: "今人不见古时月，今月曾经照古人。", id: 3 },
];
</script>
<style lang="scss" scoped>
.van-notice-bar {
  width: 343rem;
  margin: 20rem 0;
  border-radius: 5rem;
  box-shadow: 0 3rem 6rem #bbbbbba5;
}
.notice-swipe {
  height: 40rem;
  line-height: 40rem;
  font-weight: bold;
  letter-spacing: 1rem;
}
</style>
